
<template>
  <main>
    <el-row class="row">
      <el-col :span="4">
        <div class="main">
          <div class="login-header">
              欢迎登录路由管理平台
          </div>
          <div class="login-box">
            <el-input size="small" placeholder="请输入用户名" v-model="ajaxData.userName">
              <template slot="prepend">
                <i class="user"></i>
              </template>
            </el-input>
            <el-input class="input-group" type="password" size="small" placeholder="请输入密码" v-model="ajaxData.pwd">
              <template slot="prepend">
                <i class="pwd"></i>
              </template>
            </el-input>
            <el-button id="submit" size="small" class="input-group" type="primary" :disabled="loginStatus" @click="submit()">登录</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

  </main>

</template>

<script>
// 引入api
import { login } from "@/services/getData";
export default {
  data() {
    return {
      ajaxData: {
        userName: "",
        pwd: ""
      },
      loginStatus: false
    };
  },
  methods: {
    submit() {
      let ajaxData = this.ajaxData;
      let userName = ajaxData.userName;
      let pwd = ajaxData.pwd;
      let data = {
        username: userName,
        password: pwd,
        rmd: new Date().getTime()
      };
      if (userName === "") {
        this.$message.error("请输入用户名");
        return;
      } else if (pwd === "") {
        this.$message.error("请输入密码");
        return;
      }
      this.loginStatus = true;
      login(data)
        .then(res => {
          if (res.errorCode === "0000") {
            let resData = res.data || "";
            if (resData) {
              document.cookie = "CASTGC=" + resData.user.token;
              let menuResList = resData.menuResList;
              if (!menuResList) {
                this.$message.error("没有配置菜单！");
                return;
              }
              // 处理后台返回的数组， 只要前两层
              menuResList.forEach(function(v, i) {
                if (v.children) {
                  v.children.forEach(function(item, key) {
                    if (item.children && item.children.length > 0) {
                      item.children = [];
                    }
                  });
                }
              });
              // 去除修改密码的菜单
              menuResList.forEach(function(v, i) {
                if (
                  v.alias == "modifyPassword" ||
                  v.alias == "platFormCommonResource"
                ) {
                  menuResList.splice(i, 1);
                }
              });
              this.handleResFn(menuResList);
              // 排序
              // menuResList.sort((a, b) => {
              //     return a.orderNum - b.orderNum
              // })
              sessionStorage._router_userInfo_ = JSON.stringify(resData);
              localStorage.token = resData.user.token;
              this.$router.push('/' + menuResList[0].children[0].url);
            }
          } else {
            this.$message.error(res.errorDesc);
          }
          this.loginStatus = false;
        })
        // 现在没有对错误进行处理， 感觉有点坑坑哒
        .catch(res => {
          this.loginStatus = false;
        });
    },
    /**
     * 处理 children, 后台没有菜单的时候返回的是null, 导致我们这边显示不出来，这种时候把 null 变为 []
     */
    handleResFn(arr2) {
      for (var i = 0; i < arr2.length; i++) {
        arr2[i].text = arr2[i].name ? arr2[i].name : "";
        if (arr2[i].children) {
          this.handleResFn(arr2[i].children);
        } else {
          arr2[i].children = [];
        }
      }
    }
  },
  created() {}
};
</script>

<style lang="less">
main {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.row {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.main {
  width: 330px;
  padding-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.has-feedback {
  margin-top: 20px;
}

.login-header {
  background-color: #f1f1f1;
  border-bottom: 1px solid #e9eaec;
  height: 50px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #1c2438;
  line-height: 50px;
}

.login-box {
  padding: 20px;
}

.input-group {
  margin-top: 20px;
}

.block {
  display: block;
}

#submit {
  width: 100%;
}
.user {
  display: inline-block;
  margin-top: 5px;
  width: 15px;
  height: 15px;
  background-size: contain;
  background-image: url();
  background-repeat: no-repeat;
}
.pwd {
  display: inline-block;
  margin-top: 5px;
  width: 15px;
  height: 15px;
  background-size: contain;
  background-image: url();
  background-repeat: no-repeat;
}
</style>
